<template>
  <div class="header">
    <div class="right">
      <div @click="goIndex()">
        <img
          src="@/assets/images/welcomeHome.png"
          style="cursor: pointer; width: 36px; height: 36px"
          alt="">
      </div>
      <div>
        <img
          style="margin: 0 10px; cursor: pointer; width: 36px; height: 36px"
          src="@/assets/images/welcomeUser.png"
          alt="">
      </div>
      <div v-if="!hasToken" class="username text" @click="gotoLogo">登录</div>
      <div
        v-if="hasToken"
        class="username text"
        :title="userInfo && userInfo.username">
        {{ userInfo && userInfo.username }}
      </div>
      <div v-if="hasToken" class="text" @click="logout">退出</div>
    </div>
  </div>
</template>
<script>
import { getToken } from '@/utils/auth'
import { jumpToLogin } from '@/utils/public'
import { mapGetters } from 'vuex'
import store from '@/store'
import { logout } from '@/api/main'
export default {
  data() {
    return {
      hasToken: getToken() && getToken() !== 'undefined'
    }
  },
  computed: {
    ...mapGetters(['navigationInfo', 'userInfo'])
  },
  methods: {
    goIndex() {
      window.location.assign('/index')
    },
    // 跳转登录页
    gotoLogo() {
      window.location.assign('/login')
    },
    // 退出登录
    logout() {
      logout({ token: getToken() }).then(() => {
        jumpToLogin()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.header {
  width: 100%;
  height: 85px;
  position: relative;
  background: url(./navbar3.png) no-repeat;
   background-size: cover;
}
.title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: YouSheBiaoTiHei;
  font-style: normal;
  font-weight: normal;
  font-size: 36px;
  color: #ffffff;
}
.right {
  position: absolute;
  right: 40px;
  height:calc( 100% - 15px) ;
  font-size: 14px;
  line-height: 20px;
  display: flex;
  align-items: center;
  text-align: center;
  color: #ffffff;
  div{
    position: relative;
    height: 100%;
    line-height: 2.1875rem;
    padding: 1.25rem .5rem;
    font-size: 1rem;
  }
  .text{
    cursor: pointer;
    &:hover {
    background: #2d6dd4
}
  }
  .username[data-v-8c595de2] {
    max-width: 12.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
}
</style>
